import React from "react";
import {Axis, Chart, Geom, Tooltip} from "bizcharts";
import BaseComponent from "components/Base/BaseComponent";
import moment from "moment";

export default class extends BaseComponent {

  getData = () => {

    const data = [];
    const size = 12;

    for (let i = 0; i < size; i++) {
      data.push({
        year: moment().subtract(size - i, 'months').format("YYYY-MM"),
        value: Math.round(Math.random() * 30)
      });
    }

    return data;
  }

  render() {

    const cols = {
      value: {
        min: 0
      },
      year: {
        range: [0, 1],
      }
    };
    return (
      <div>
        <Chart height={250} data={this.getData()} scale={cols} forceFit>
          <Axis name="year"/>
          <Axis name="value"/>
          <Tooltip
            crosshairs={{
              type: "y"
            }}
          />
          <Geom type="line" position="year*value" size={2}/>
          <Geom
            type="point"
            position="year*value"
            size={4}
            shape={"circle"}
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
          />
        </Chart>
      </div>
    );
  }
}
